<template>
  <div id="test2">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line">
        <i class="el-icon-edit-outline"></i>我要报考
        <i class="el-icon-arrow-right"></i>高水平运动员</el-col>
    </el-row>
    <div class="content">
      <div class="back" v-show="tipshow"></div>
      <div class="tip" v-show="tipshow">
        <el-alert
          :title="tip"
          type="error"
          left
          show-icon>
        </el-alert>
      </div>
      <form class="layui-form formMessage" action="">
        <table class="layui-table">
          <tbody>
            <tr>
              <td colspan="2">身高(cm)</td>
              <td colspan="2">
                <el-input v-model="form.height" ></el-input>                        
              </td>
              <td colspan="2" width="60px">体重(kg)</td>
              <td colspan="2">
                <el-input v-model="form.weight"></el-input>                           
              </td>
              <td colspan="2" width="100px">
                健康状况                                   
              </td>
              <td colspan="2">
                <el-select v-model="form.health" placeholder="请选择">
                  <el-option label="健康" value="健康"></el-option>
                  <el-option label="一般" value="一般"></el-option>
                  <el-option label="较差" value="较差"></el-option>
                </el-select>                                    
              </td>
            </tr>
            <tr>
              <td colspan="2">报考专业</td>
              <td colspan="4">
                <el-select v-model="form.major" placeholder="请选择">
                  <el-option v-for="item in major" :label="item" :value="item"></el-option>
                </el-select>                                
              </td>
              <td colspan="2">
                考生类别                                   
              </td>
              <td colspan="4">
                <el-select v-model="form.categroy" placeholder="请选择">
                  <el-option v-for="item in categroy" :label="item" :value="item"></el-option>
                </el-select>                                    
              </td>
            </tr>
            <tr>
              <td colspan="2">运动项目</td>
              <td :colspan="Pcolspan">
                <el-select v-model="form.project.name" placeholder="请选择" @change="changeProject">
                  <el-option v-for="item in project" :label="item" :value="item"></el-option>
                </el-select>                            
              </td>
              <td colspan="2" v-show="proShow">
                  证书专项<br>(游泳)                              
              </td>
              <td colspan="4" v-show="proShow">
                   <el-input v-model="form.project.witness" placeholder="证书名称和编号"></el-input>                           
              </td>
            </tr>
            <tr>
              <td class="awards" colspan="2" :rowspan="Arowspan">奖惩情况</td>
              <td colspan="2">
                时间
              </td>
              <td colspan="2">
                名称
              </td>
              <td colspan="2">
                地点
              </td>
              <td colspan="1">
                成绩
              </td>
              <td colspan="1">
                名次
              </td>
              <td colspan="2">
                证明
              </td>
            </tr>
            <template v-for="(item,index) in form.reward">
              <tr class="award">
                <td colspan="2" width="100px">
                 <el-date-picker
                    v-model="item.time"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
                </td>
                <td colspan="2">
                 <el-input v-model="item.name"></el-input>
                </td>
                <td colspan="2">
                 <el-input v-model="item.place"></el-input>
                </td>
                <td colspan="1">
                 <el-input v-model="item.score"></el-input>
                </td>
                <td colspan="1">
                 <el-input v-model="item.rank"></el-input>
                </td>
                <td colspan="2">
                  <el-upload
                    class="avatar-uploader"
                    name="file"
                    :action="host+'/3v1t.smserver.cn/index.php/student/Aboutbaseinfos/upload'"
                    :show-file-list="false"
                    :on-change="change"
                    :on-progress='progress'
                    :on-success='uploadSuccess'
                    accept="image/*"                  
                    >
                    <img v-if="item.witness" :src="item.witness" class="avatar" @click="getIndex(index)">
                    <i v-else class="el-icon-plus avatar-uploader-icon" @click="getIndex(index)"></i>
                  </el-upload>
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="11" align="center" @click="addInputAward">
                <i class="el-icon-plus"></i>添加
              </td>
            </tr>
          </tbody>
        </table>
        <div style="text-align: center;"> 
            <el-button type="primary" @click="add" style="width:100px;" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">保存</el-button> 
            <el-button type="primary" @click="joinTest" style="width:100px;">报名</el-button>                           
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  export default {
    data() {
      return {      
        test:{
          height:false
        },
        tipshow:false,
        tip:'无法修改',
        fullscreenLoading:false,
        imageUrl: '',
        Arowspan:6,
        Pcolspan:10,
        proShow:false,
        categroy:[],
        major:[],
        project:[],
        idx:'',
        form: {
          height:'',
          weight:'',
          major:'',
          project:{
            name:'',
            witness:''
          },
          categroy:'',
          reward: [
            {
              time: '',
              name: '',
              place:'',
              score:'',
              rank:'',
              witness: '' 
            },
            {
              time: '',
              name: '',
              place:'',
              score:'',
              rank:'',
              witness: '' 
            }, 
            {
              time: '',
              name: '',
              place:'',
              score:'',
              rank:'',
              witness: '' 
            },
            {
              time: '',
              name: '',
              place:'',
              score:'',
              rank:'',
              witness: '' 
            }
          ],
        },
        
      }
    },
    components: {
      VDistpicker
    },
    mounted(){
      this.fullscreenLoading=true;
      this.getInfo();
    },
    methods: {
      getIndex(idx){
        //console.log(idx);
        this.idx=idx;
      },
      change2( file, fileList){
       // console.log(file.raw.type);
        const isLt2M = file.raw.size / 1024 / 1024 < 1;
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 1MB!');
            return;
          }
          //this.form.project.witness = URL.createObjectURL(file.raw);
      },
      uploadSuccess2(response, file, fileList){
        //console.log(this.form.project.witness)
        this.form.project.witness=response.url;
        this.fullscreenLoading=false;
      },
      change( file, fileList){
       // console.log(file.raw.type);
        const isLt2M = file.raw.size / 1024 / 1024 < 1;
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 1MB!');
            return;
          }
          
          // this.form.reward[this.idx].imageUrl = URL.createObjectURL(file.raw);
          // let fd = new FormData()
          // fd.append('file', file.raw)
          // this.file=fd;
          //console.log(this.form.reward)
      },
      progress(){
        this.fullscreenLoading=true;
      },
      uploadSuccess(response, file, fileList){
        console.log(this.idx);
        this.form.reward[this.idx].witness=response.url;
        //this.form.reward[this.idx].imageUrl = response.url;
        this.fullscreenLoading=false;
        
      },
      getInfo(){
        var that=this;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/get_zxs',
          method:'post',
          headers:{
                "Content-type":"application/json"
          }
        }).then((res)=>{
          //console.log(res);
          that.fullscreenLoading=false;
          var data=res.data.data;
          if(res.data.code==1){
            that.categroy=data.categroy;
            that.major=data.major;
            that.project=data.runLevel;
            if(data.status==2){
              that.tip=res.data.msg;
              that.tipshow=true;
            }
            if(data.udata.project){
              if(data.udata.project.name.indexOf("游泳")>=0){
                this.proShow=true;
                this.Pcolspan=4;
              }
              that.form=data.udata;
            }

          }else if(res.data.code==2){
            that.$router.push('/userHome/joinTest')
          }
        })
      },
      add(){
        var that=this;
         this.fullscreenLoading=true;
        var message=this.form;
       // console.log(message);
        // var tag=true;
        //   _.forEach(message, function(value, key) {  
        //       if(value==""){
        //         //console.log(key)
        //         that.test=true;
        //         tag = false;
        //       } 
        //   });
        // if(!tag){
        //   that.$message({
        //     type:'warning',
        //     message:'表单填写不完整，请检查！'
        //   })   
        // }else{
              this.axios({
                url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/zxspost',
                method:'post',
                data:JSON.stringify(message),
                headers:{
                  "Content-type":"application/json"
                }
              }).then((res)=>{
                if(res.data.code==1){
                   that.fullscreenLoading=false;
                  that.$message({
                    type:'success',
                    message:''+res.data.msg
                  })
                }else if(res.data.code==2){
                   that.fullscreenLoading=false;
                  that.$message({
                    type:'warning',
                    message:''+res.data.msg
                  })
                }   
              })
        //}
      },
      joinTest(){
        var that=this;
        this.fullscreenLoading=true;
        var message=this.form;
              this.axios({
                url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/zxspost',
                method:'post',
                data:JSON.stringify(message),
                headers:{
                  "Content-type":"application/json"
                }
              }).then((res)=>{
                if(res.data.code==1){
                  that.axios({
                    url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/signup',
                    method:'post',
                    data:JSON.stringify({type:"02"}),
                    headers:{
                      "Content-type":"application/json"
                    }
                  }).then((res)=>{
                    that.fullscreenLoading=false;
                    if(res.data.code==1){
                      setTimeout(()=>{
                         that.$router.push('/userHome/print1')
                      },3000)
                      that.$message({
                        type:'success',
                        message:''+res.data.msg
                      })
                    
                    }else if(res.data.code==2){
                      that.$message({
                        type:'warning',
                        message:''+res.data.msg
                      })
                    }   
                  })
                }else if(res.data.code==2){
                  that.fullscreenLoading=false;
                  that.$message({
                    type:'warning',
                    message:''+res.data.msg
                  })
                }   
              })
      },
      addInputAward() {
        this.form.reward.push({
              time: '',
              name: '',
              place:'',
              score:'',
              rank:'',
              witness: '' 
            })
        this.Arowspan += 1;
      },
      changeProject(value){
        //console.log(value.indexOf("游泳"));
        if(value.indexOf("游泳")>=0){
          this.proShow=true;
          this.Pcolspan=4;
        }else{
          this.proShow=false;
          this.Pcolspan=10;
        }
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  #test2 {
    //width:100%;
    //line-height:100%;
    padding: 10px;
    .line {
      border-bottom: 1px solid #ccc;
      text-align: left;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
    }
    .content {
      padding: 20px;
      text-align: center;
      position:relative;
    }
    .layui-table img{
      max-height:60px;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 135px;
    }
    .tip{
      text-align: left;
    }
    .back{
      height:100%;
      width:100%;
      background:transparent;
      position:absolute;
      top:0;
      left:0;
      right:0;
      z-index:99;
    }
  }

</style>
